<template>
  <div class="product_tracing">
    <one-title title="产品追溯" @refreshData="handleRefresh"></one-title>
    <div class="bom_tree_container fixed_top_56">
      <work-order-bom-tree
        @selectNode="selectNode"
        class="mes_tree bom_tree"
      ></work-order-bom-tree>
      <div>
        <div class="title_bar">
          <div>
            <p style="width: 180px;margin-right: 20px">计划开始时间：{{workOrderDetail.workorder.planStartTime |
              timeFormat}}</p>
            <p style="width: 180px;margin-right: 20px">计划完成时间：{{workOrderDetail.workorder.planEndTime | timeFormat}}</p>
            <p style="width: 110px;margin-right: 20px">计划数量：{{workOrderDetail.workorder.planQuantity}}</p>
            <p style="width: 110px;margin-right: 20px">已拆分数量：{{workOrderDetail.workorder.spiltQuantity}}</p>
            <p style="width: 110px;margin-right: 20px">已完成数量：{{workOrderDetail.completeQuantity}}</p>
          </div>
        </div>
        <div class="table_container">
          <el-table
            :data="listData.list"
            ref="tableNode"
            v-loading="isLoading"
            @current-change="handleCurrentChange"
            @sort-change="handleSort"
            @filter-change="handleFilterChange"
            highlight-current-row
            border
            stripe
            tooltip-effect="dark">
            <el-table-column
              width="40"
              fixed="left"
              align="center"
            >
              <template slot-scope="scope">
                <el-radio
                  class="radio_no_label"
                  v-model="turnoverId"
                  :label="scope.row.id">
                </el-radio>
              </template>
            </el-table-column>
            <mes-col-comp
              :key="index"
              v-for="(column, index) in columns"
              :column="column">
            </mes-col-comp>
          </el-table>
        </div>
        <mes-pagination
          :pageSelectShow="false"
          @updateData="init"
          :currentPage="listData.pageNo"
          :total="listData.count || 0"
          :pageSize="listData.pageSize">
        </mes-pagination>
        <div class="turnover_detail">
          <workstage-list :infoData="turnoverWorkstages" class="workstage_list"></workstage-list>
          <material-list :infoData="workstageActualMaterials" class="material_list"></material-list>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import columns from './columns'
import {MaterialList, WorkstageList} from './components'

let storeModule = 'productTracing'

let batchInterFace = 'a/turnoverbatch/turnoverBatch/list'
let productTraceInterFace = 'a/turnoverbatch/turnoverBatch/productTrace'
// 获取工单信息
let getWorkorderInterFace = 'a/workorder/workorder/getWorkorder'

export default {
  name: 'ProductTracing',
  components: {
    WorkstageList,
    MaterialList,
  },
  data() {
    return {
      columns: columns,
      isLoading: false, // 数据加载中
      sortOrder: {}, // 排序对象
      searchParams: {}, // 查询参数
      selectItems: [], // 选中的数据
      workorderId: '',
      turnoverId: ''
    }
  },
  computed: {
    listData() {
      return this.$store.state.productTracing.listData
    },
    // 周转批次工序
    turnoverWorkstages() {
      return this.$store.state.productTracing.turnoverDetail.turnoverWorkstages
    },
    // 工序物料列表
    workstageActualMaterials() {
      return this.$store.state.productTracing.turnoverDetail.workstageActualMaterials
    },
    // 工单信息
    workOrderDetail() {
      return this.$store.state[storeModule].workOrderDetail || {}
    },
  },
  methods: {
    handleFilterChange(filters) {
      let filterParams = this.$filterParams(this.columns, filters)
      Object.assign(this.searchParams, filterParams.search)
      this.sortOrder = filterParams.order // 排序对象
      this.$refs.tableNode.clearSort()
      this.init()
    },
    // 排序
    handleSort(obj) {
      this.sortOrder = this.$getSortOrder(obj)
      this.init()
    },
    selectNode(id) {
      this.workorderId = id
      this.$store.commit('ClearTurnoverDetail')
      this.init()
      this.getWorkorder()
    },
    // 请求数据整理
    getPostData(page) {
      const fields = ['workorderId', 'workorderNumber', 'id', 'turnoverStatusId', 'turnoverStatusValue', 'turnoverProcessStatusId', 'turnoverProcessStatusValue', 'trackDemandId', 'trackDemandValue', 'taskTypeId', 'taskTypeValue']
      let postData = {
        pageNo: page ? page.pageNo : 1,
        pageSize: page ? page.pageSize : this.listData.pageSize || 5,
        sort: this.sortOrder,
        query: {
          columns: this.columns.reduce((pre, cur) => [...pre, cur.prop], fields),
          ...this.searchParams,
          viewSource: 7,
        }
      }
      postData.query.workorderId = this.workorderId
      return postData
    },
    init(page) {
      if (!this.workorderId) {
        this.$store.state.productTracing.listData = []
        return
      }
      this.isLoading = true
      let data = this.getPostData(page)
      let postData = {
        method: 'post',
        url: batchInterFace,
        module: storeModule,
        data: data,
        state: 'listData',
      }
      this.$store.dispatch('saveData', postData).then(res => {
        if (res.list && res.list.length !== 0) {
          this.turnoverId = res.list[0].id
          this.$refs.tableNode.setCurrentRow(res.list[0])
        }
      }).finally(() => {
        this.isLoading = false
      })
    },
    getWorkorder() {
      if (!this.workorderId) return
      let postData = {
        method: 'get',
        url: getWorkorderInterFace,
        params: {
          id: this.workorderId
        },
        module: storeModule,
        state: 'workOrderDetail',
      }
      this.$store.dispatch('saveData', postData)
    },
    // 获取批次详情
    getTurnoverDetail() {
      let postData = {
        method: 'post',
        url: productTraceInterFace,
        module: storeModule,
        data: {
          turnoverId: this.turnoverId
        },
        state: 'turnoverDetail',
      }
      this.$store.dispatch('saveData', postData)
    },
    // 刷新图标点击
    handleRefresh() {
      this.searchParams = {} // 搜索对象
      this.sortOrder = {} // 排序对象
      this.$refs.tableNode.clearSort()
      this.$refs.tableNode.clearFilter()
      this.init()
    },
    handleCurrentChange(row) {
      if (!row) return
      this.turnoverId = row.id
      this.getTurnoverDetail()
    }
  }
}
</script>

<style lang="less">
  .product_tracing {
    height: 100%;
    .title_bar {
      margin-top: 20px;
      padding: 0 20px;
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      color: #333;
      p {
        display: inline-block;
        line-height: 24px;
      }
      .status_desc p {
        width: 68px;
        height: 24px;
        text-align: center;
        margin-left: 5px;
      }
    }
    .table_container {
      margin-top: 10px;
    }
    .turnover_detail {
      display: flex;
      overflow-x: hidden;
      .workstage_list {
        flex: 1;
        overflow-x: auto;
      }
      .material_list {
        flex: 480px 0 0;
      }
    }
  }
</style>
